<template>
  <el-container class="layout-ui">
    <el-header>
      <el-menu default-active="1" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item disabled>CLOUD编译器</el-menu-item>
        <el-submenu index="1">
          <template slot="title">页面</template>
          <el-menu-item index="1-1" v-dialog="false" data-type="newpage">新建页面</el-menu-item>
          <el-menu-item index="1-2">新建模型</el-menu-item>
          <el-menu-item index="1-3">打开</el-menu-item>
          <el-menu-item index="1-4">保存</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">模型</template>
          <el-menu-item index="2-1">新建模型</el-menu-item>
          <el-menu-item index="2-2">导入模型</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">数据集</template>
          <el-menu-item index="3-1">创建数据集</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">事件</template>
          <el-menu-item index="4-1">新建事件</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">帮助</template>
          <el-menu-item index="5-1">操作文档</el-menu-item>
          <el-menu-item index="5-2">关于我们</el-menu-item>
          <el-menu-item index="5-3">BUG提交</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-main class="layout-body">
      <div class="cloud-tools">
        <div class="ct-handle">
          <el-button @click="handleNews">新建</el-button>
          <el-button @click="handleSave">保存</el-button>
          <el-button @click="handleOpen">打开</el-button>
        </div>
        <div class="ct-main">
          <!--<component :is="iemptyi"/> -->
          <!-- 资源管理器 -->
          <class-form class="ct-main-resources" v-model="main.resources" />
          <!-- 组件库 -->
          <class-form class="ct-main-controls" v-model="main.controls" />
        </div>
        <div class="ct-layout">
          <!-- 标尺 -->
          <page-scale />
          <!-- 视图区  画布 -->
          <div class="ct-layout-canvas">
            <layout-canvas />
            {{config}}
          </div>
        </div>
        <div class="ct-sidebar">
          <!-- 数据操作台 -->
          <class-form class="ct-sidebar-library" v-model="main.libraries" />
          <!-- 控件设置 -->
          <class-form class="ct-sidebar-attribute" v-model="main.attributes" />
          <!-- 图层 -->
          <class-form class="ct-sidebar-layer" v-model="main.layers" />
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script type="text/javascript">
import classForm from '../plugins/class-form'
import pageScale from '../plugins/page-scale'

import iempty from '../empty.vue'
import canvas from './canvas'
import _store from './store'
import Vue from 'vue'
import Vuecx from 'vuecx'
import { mapState, mapMutations, mapActions } from 'vuecx'
import patrol from '../patrol'
import { forward, reverse } from '../utils'
import directives from '../directives'


Vue.use(Vuecx);
let store = new Vuecx.Store(_store);

export default {
  components: {
    "class-form": classForm,
    "page-scale": pageScale,
    "layout-canvas": canvas
  },
  directives: directives,
  store,
  created() {
    store.bootstrap(this);
  },
  data() {
    return {

    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    ...mapState(['main', 'config'])
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.handleNews();
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['set_resources', 'set_config']),
    ...mapActions(['setResources', 'setConfig', 'setLibraries', 'setMain']),
    /**
     * 操作资源管理器
     * @return {[type]} [description]
     */
    handleResources() {

    },
    /**
     * 新建页面
     * @return {[type]} [description]
     */
    handleNews() {
      this.setConfig({
        "name": "body",
        "data": {
          "title": "我的页面",
          "name": "new_page",
          "height": "500px",
          "width": "800px",
          "type": "page"
        },
        "slot": [

        ],
        "regulation": {
          "amount": 999,
          "level": false,
          "scope": ['row']
        },
        "components": "",
        "attributes": []
      })
    },
    /**
     * 新建组件
     * @return {[type]} [description]
     */
    handleNewComponent() {

    },
    /**
     * 打开页面
     * @return {[type]} [description]
     */
    handleOpen() {
      this.$cloud.post("canvas/first").then(response => {
        let data = reverse(response, patrol);
        console.log("反向", data);
        this.setConfig(data.config);
        this.setMain(data.main);
      }).catch(error => {
        console.log(error);
      });
    },
    /**
     * 操作数据保存
     * @return {[type]} [description]
     */
    handleSave() {
      let data = forward({
        "config": this.config,
        "main": this.main
      });
      this.$cloud.post("canvas/save", data).then(response => {
        console.log("保存成功", response);
      }).catch(error => {
        console.log(error);
      });
    }
  }
}

</script>
<style type="text/css" lang="scss">
@import "./style.scss";

</style>
